import React from 'react'
import { View } from '@tarojs/components';
import { SideBarItem } from '@/model/declare';
import { SideBarItemEle } from './Item';
import './index.scss'

export interface ISideBarRrops {
    items: SideBarItem[]
    activeKey: string
    onChange?: (item: SideBarItem, activeKey: string) => void
}

export const SideBar: React.FC<ISideBarRrops> =
    ({ items, activeKey, onChange }) => {

        return (
            <View className="xxm-sideba-ls">
                {
                    items.map(it => {
                        return <SideBarItemEle {...it}
                            key={it.id}
                            active={it.id === activeKey}
                            onClick={() => {
                                onChange && onChange(it, activeKey)
                            }}
                        />
                    })
                }
            </View>
        )
    }